<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<script type="text/javascript">
     var Class=(function(){
     	var _mix=function(r,s){
     		for(var p in s){
     			if(s.hasOwnProperty(p)){
     				r[p]=s[p];
     			}
     		}
     	}
     	 var _extend=function(){
     	 	thisinitPrototype=true;
     	 	var prototype=new this();
     	 	this.initPrototype=false;
     	 	var items=Array.prototype.slice.call(arguments)||[];
     	 	var item;
     	 	while(item=items.shift()){
     	 		_mix(prototype,item.prototype||item);
     	 	}

     	 	function SubClass(){
     	 		if(!SubClass.initPrototype&&this.init){
     	 			this.init.apply(this,arguments);
     	 		}
     	 	}
     	 	SubClass.prototype=prototype;
     	 	SubClass.prototype.constructor=SubClass;
     	 	SubClass.extend=_extend;
     	 	return SubClass;
     	 }

     	 var Class=function(){};
     	 Class.extend=_extend;
     	 return Class;
     })();
     

     var TextCount=Class.extend({
     	init:function(config){
            this.input=$(config.id);
            this._bind();
            this.render();
     	},
     	render:function(){
     		var num=this._getNum();
     		if($("#J_input_count").length==0){
     			this.input.after('<span id="J_input_count"></span>');
     		}
     		$("#J_input_count").html(num+"个字");
     	},
     	_getNum:function(){
     		return this.input.val().length;
     	},
     	_bind:function(){
     		var self=this;
     		self.input.on("keyup",function(){
     			self.render();
     		});
     	}

     });
     $(function(){
     	new TextCount({
     		id:"#J_input"
     	});
     })
	</script>
	<input type="text" id="J_input"/>
</body>
</html>